<template>
  <div id="home">
    <Title>
      <template v-slot:center>图书商城</template>
    </Title>
    <TabControl v-show="isTabFixed" :titles="['畅销','新书','精选']" @tabClick="tabClick"></TabControl>
    <div class="wrapper">
      <div class="content">
        <div ref="banref">
          <HomeSwiper :banners="banners"></HomeSwiper>
          <RecommendView :recommends="recommends"></RecommendView>
        </div>

        <TabControl :titles="['畅销','新书','精选']" @tabClick="tabClick"></TabControl>

        <GoodsList :goods="showGoods"></GoodsList>
      </div>
    </div>
    <BackTop v-show="isShowBackTop" @backTop="backTop"></BackTop>
  </div>
</template>

<script>
import Title from "@/components/common/title/Title";
import RecommendView from "@/views/home/comps/RecommendView";
import {getHomeAllData, getHomeGoods} from "@/network/home";
import TabControl from "@/components/content/TabControl";
import {onMounted, reactive, ref, computed, watchEffect, nextTick} from "vue";
import GoodsList from "../../components/content/goods/GoodsList";
import BScroll from "better-scroll"
import BackTop from '@/components/common/BackTop'
import HomeSwiper from "./comps/HomeSwiper";
export default {
  components: {Title, RecommendView, TabControl, GoodsList,BackTop,HomeSwiper},
  setup() {
    let isTabFixed = ref(false);
    let banref = ref(null);
    let isShowBackTop=ref(false)
    let recommends = ref([]);
    let banners=ref([])
    //图书列表s
    const goods = reactive({
      sales: {page: 1, list: []},
      new: {page: 1, list: []},
      recommend: {page: 1, list: []},
    })
    const showGoods = computed(() => {
      return goods[currentType.value].list
    })
    let currentType = ref('sales')
    let bscroll = reactive({})
    onMounted(() => {
      getHomeAllData().then(res => {
        // console.log(res.goods)
        recommends.value = res.goods.data
        banners.value=res.slides
      })
      getHomeGoods('sales').then(res => {
        goods.sales.list = res.goods.data
      })
      getHomeGoods('recommend').then(res => {
        goods.recommend.list = res.goods.data
      })
      getHomeGoods('new').then(res => {
        goods.new.list = res.goods.data
      })
      //创建betterScroll对象
      bscroll = new BScroll(document.querySelector('.wrapper'), {
        probeType: 3, //0,1,2,3只要运行就会触发scroll事件
        click: true, //是否允许点击
        pullUpLoad: true //上拉加载更多，默认是false
      })
      //触发滚动事件
      bscroll.on('scroll', (position) => {
        // console.log(banref.value)
        isShowBackTop.value=isTabFixed.value = (-position.y) > banref.value.offsetHeight
        // console.log(position.y)
      })
      //上拉加载数据，触发pullingUp
      bscroll.on('pullingUp', () => {
        console.log('上拉')
        const page = goods[currentType.value].page + 1;
        getHomeGoods(currentType.value, page).then(res => {
          goods[currentType.value].list.push(...res.goods.data);
          goods[currentType.value].page += 1
        })
        //完成上拉，等数据请求完成，要将数据展示出来
        bscroll.finishPullUp()
        bscroll.refresh()
      })
    })
    //监听任何一个变量有变化
    watchEffect(() => {
      nextTick(() => {
        //重新计算高度
        bscroll && bscroll.refresh()
      })
    })

    const tabClick = (index) => {
      let types = ['sales', 'new', 'recommend'];
      currentType.value = types[index]
      nextTick(() => {
        //重新计算高度
        bscroll && bscroll.refresh()
      })
    }
    const backTop=()=>{
      bscroll.scrollTo(0,0,500)
    }
    return {recommends, tabClick, goods, showGoods,
      isTabFixed,banref,backTop,isShowBackTop,banners}


  }

}
</script>v

<style scoped lang="scss">
#home {
  height: 100vh;
  position: relative;

  .wrapper {
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0px;
    right: 0px;
    overflow: hidden;

    .content {

    }

    .banner {
      img {
        width: 100%;
      }
    }
  }
}


</style>
